<template>
  <div class="imageMap">
    <div class="commentBody" v-if="mapFloor">
      <div class="imgBox" id="map_point" v-if="floorData.length">
        <img :src="floorData[floorIndex].map" alt="" id="myBiaoZhu" ondragstart="return false">
        <!--      坐标点位 -->
        <div class="point-list" v-for="(item,index) in banMa" :key="index"
             :style="{left:item.point[0]+'px',top:item.point[1]+'px'}">
          <!-- 监控坐标警报 @click="showVideoFn(item)" -->
          <div class="iconfont iconshipinjiankongicon" v-if="item.type==2&&showOption[2]"
               @mouseover="item.showpouper= true" @mouseout="item.showpouper = false">
            <div class="pouperBox" v-show="item.showpouper">
              <div class="pouperBox-box">
                <p>设备名称:{{ item.deviceName }}</p>
                <p>设备IP: {{ item.ip }}</p>
                <!--                  1、视频移动报警 2、视频录像报警 3、视频丢失报警 4、输入端口报警 5、输出端口报警 6、视频遮挡报警-->
                <p>设备状态: <span
                    :style="{'color': item.fail_type?'red':'green'}">{{
                    item.fail_type ? (item.fail_type == 1 ? '视频移动报警' : (item.fail_type == 2 ? '视频录像报警' : (item.fail_type == 3 ? '视频丢失报警' : (item.fail_type == 4 ? '输入端口报警' : (item.fail_type == 5 ? '输出端口报警' : '视频遮挡报警'))))) : '正常'
                  }}</span>
                </p>
                <p v-if="item.fail_type>0">操作：
                  <el-button @click.stop="repairFn(index)" size="mini">消管</el-button>
                </p>
              </div>
            </div>
            <div class="domContainer" v-if="item.status==1&&item.fail_type==0">
              <div class="dot"></div>
              <div class="pulse successBg"></div>
              <div class="pulse-big successColor" @mouseover="mouseOver"
                   @mouseleave="mouseLeave" :data-index="index"></div>
            </div>
            <div class="domContainer" v-if="item.fail_type>0">
              <div class="dot"></div>
              <div class="pulse warningBg"></div>
              <div class="pulse-big warningColor" @mouseover="mouseOver"
                   @mouseleave="mouseLeave" :data-index="index"></div>
            </div>
          </div>
          <!--            文字名称-->
          <div class="point-text" v-if="item.type==1&&showOption[1]">
            <span>{{ item.name }}</span>
          </div>
          <!--            区角位置-->
          <!--            <div class="domContainer_corner" v-if="item.type==3">-->
          <!--              <div class="dot"></div>-->
          <!--              <div class="pulse successBg"></div>-->
          <!--              <div class="pulse-big successColor"></div>-->
          <!--            </div>-->
          <!-- 区角位置  -->
          <div class="iconfont icontiyuyundongchangsuo corner-icon-color" v-if="item.type==3&&showOption[3]"
               @click="showCornerFn(item)"
               @mouseover="item.showpouper= true" @mouseout="item.showpouper = false">
            <div class="pouperBox" v-show="item.showpouper">
              <div class="pouperBox-box">
                <p>{{ `区角名称:${item.corner.name ? item.corner.name : '未知'}` }}</p>
                <p>在线人数: {{ cornerNumber[item.corner.corner] ? cornerNumber[item.corner.corner].number : 0 }}</p>
                <!--                  <p>操作：<el-button @click="closePOpup" size="mini">确定</el-button></p>-->
              </div>
            </div>
            <!--              <div class="domContainer">-->
            <!--                <div class="dot"></div>-->
            <!--                <div class="pulse" :class="item.status==1?'successBg':'warningBg'"></div>-->
            <!--                <div class="pulse-big" :class="item.status==1?'successColor':'warningColor'"-->
            <!--                     @mouseover="mouseOver"-->
            <!--                     @mouseleave="mouseLeave" :data-index="index"></div>-->
            <!--              </div>-->
            <span class="corner-name-box">{{ item.corner.name }}</span>
          </div>
        </div>
        <!--          楼层切换-->
        <div class="floor_list">
          <div v-for="(item,index) in floorData" :key="item.id" class="floor_list_data"
               :class="index==floorIndex?'acitveFloor':''" @click="getMapFloor(index)">{{ item.name }}
          </div>
        </div>
        <!--          楼层数据内容-->
        <div class="floorData-box">

        </div>
        <!--          楼层坐标类型数据内容 2 监控 1 文字 3 区角-->
<!--        <div class="floorData-pointType">-->
<!--          <div class="floorData-pointType-list" @click="tablineFn(2)" :class="showOption[2]?'':'activeTab'">-->
<!--            <i class="iconfont iconshipinjiankongicon"></i><span>监控（{{ typeNumber[2] }}）</span><i-->
<!--              :class="showOption[2]?'el-icon-check':'el-icon-close'"></i>-->
<!--          </div>-->
<!--          <div class="floorData-pointType-list" @click="tablineFn(3)" :class="showOption[3]?'':'activeTab'">-->
<!--            <i class="iconfont icontiyuyundongchangsuo corner_color"></i><span>区角（{{ typeNumber[3] }}）</span><i-->
<!--              :class="showOption[3]?'el-icon-check':'el-icon-close'"></i>-->
<!--          </div>-->
<!--        </div>-->
        <div class="erro-video-line" v-if="videoErroStatus">
          <div class="erro-video-line-list" v-for="item in videoErroList">
            <div class="erro-video-line-list-video">
              <iframe :src="videoSrc" frameborder="0" class="erro-video-line-list-video-iframe"></iframe>
            </div>
            <div class="erro-video-line-list-btn">
              <div class="erro-video-line-list-btn-l">
                <p>{{ item.data.deviceName }}</p>
                <!--                  <p>失效</p>-->
              </div>
              <div class="erro-video-line-list-btn-r" @click="showVideoErroFn(item)">
                <span>查看</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="floorNotData">
      <div class="title-floor">未找到相应楼层数据</div>
      <el-button type="primary" plain @click="getToFloor">立即添加楼层</el-button>
    </div>
    <previewVideo :visible.sync="videoVisible" :videoIp="videoIp" :pointData="pointData"></previewVideo>
    <showCornerStudent :visible.sync="floorStudent" :floorStudentOption="floorStudentOption"></showCornerStudent>
  </div>
</template>

<script>
import previewVideo from "@/views/admin/floorManage/previewVideo";
import showCornerStudent from "@/views/admin/floorManage/showCornerStudent";
import {
  openBASE_URL
} from '@/env'

export default {
  props: ['visible'],
  components: {
    previewVideo,
    showCornerStudent
  },
  data() {
    return {
      floorStudent: false,
      loading: true,
      dialogVisible: false,
      banMa: {}, // 楼层监控设备
      proportionX: 0, // 比例 x
      proportionY: 0, // 比例 y
      imageOption: [0, 0],
      mapPoint: [], // 保存坐标
      videoVisible: false,
      floorData: [],
      floorIndex: 0,// 当前楼层
      typeNumber: {
        1: 0, // 文字
        2: 0, // 视频
        3: 0, // 区角
      }, // 各个类型的数量
      showOption: {
        1: true, // 文字
        2: true, // 视频
        3: true, // 区角
      },
      videoErroList: {},
      videoErroStatus: false,
      cornerNumber: {},
      setTime: '',
      setTimeStudent: '',
      videoIp: '',
      // videoSrc: 'http://192.168.0.42:2000/?cameraIP=192.168.0.2&username=admin&password=zsd.2021'
      videoSrc: '',
      pointData: null,
      floorStudentOption: null,
      mapFloor: false
    }
  },
  watch: {
    // visible() {
    //   this.dialogVisible = this.visible
    //   if (this.visible) {
    //     // 获取整栋楼层信息
    //     this.getFloorData() // 楼层信息
    //     this.getMessageFn() // 设备报错
    //     this.getStudentFn()// 区角人员
    //   } else {
    //     this.banMa = {}
    //     this.floorData = []
    //     this.floorIndex = 0// 当前楼层
    //     this.loading = true
    //     clearInterval(this.setTime)
    //     clearInterval(this.setTimeStudent)
    //   }
    // }
  },
  created() {
    // this.getFloorData()
    console.log('进入平面')
    this.getFloorData() // 楼层信息
    // this.getMessageFn() // 设备报错
    // this.getStudentFn()// 区角人员
  },
  methods: {
    tablineFn(keys) {
      this.showOption[keys] = !this.showOption[keys];
    },
    loadImage() {
      let n = this;
      let nImg = new Image();
      nImg.src = this.floorData[this.floorIndex].map;
      nImg.onload = function () {
        n.imageOption[0] = nImg.width;
        n.imageOption[1] = nImg.height;
        // 单前图片尺寸
        let myImg = document.querySelector("#myBiaoZhu");
        let currWidth = myImg.clientWidth;
        let currHeight = myImg.clientHeight;
        n.proportionX = (currWidth / nImg.width)// 比例 681 147 .toFixed(2)
        n.proportionY = (currHeight / nImg.height)// 比例 681 147
        console.log('原始图片尺寸：', nImg.width + " " + nImg.height)
        console.log('目前的宽高：', currWidth, currHeight)
        console.log('比例：', (currWidth / nImg.width))
        // console.log('banMaData.positionLat*currWidth:', parseFloat(banMaData.positionLat) * parseFloat(currWidth))
        // console.log(parseFloat(banMaData.positionLat))
        // console.log(parseFloat(n.proportionX))
        // 请求楼层数据内容
        n.getMapAllPointFn()
        // if(n.pointInfo.point){
        //   n.banMa.push({
        //     positionLat: parseFloat(n.pointInfo.point[0]) * parseFloat(n.proportionX),
        //     positionLng: parseFloat(n.pointInfo.point[1]) * parseFloat(n.proportionY),
        //   })
        // }
      }

    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    // 楼层坐标明细
    async getMapAllPointFn() {
      // 重置数量信息
      for (let n in this.typeNumber) {
        this.typeNumber[n] = 0;
      }
      let n = this;
      let list_ = this.floorData[this.floorIndex].floorData;
      let MapPointList = {};
      for (let i in list_) {
        if (Number(list_[i].type) === 2) {
          this.typeNumber[2]++
        } else if (Number(list_[i].type) === 3) {
          this.typeNumber[3]++
        } else {
          this.typeNumber[1]++
        }
        let dataOption = JSON.parse(list_[i].data)
        let array_ = {
          id: list_[i].id,
          type: list_[i].type,
          name: dataOption.name,
          fail_type: list_[i].fail_type,
          point: [
            parseFloat(dataOption.point[0]) * parseFloat(n.proportionX),
            parseFloat(dataOption.point[1]) * parseFloat(n.proportionY)
          ],
          corner: dataOption.corner,
          deviceName: dataOption.deviceName,
          ip: dataOption.ip,
          status: Number(i) === 3 ? 0 : 1, // 1正常 0异常
          showpouper: false,
          allData: dataOption
        }
        // this.banMa.push(array_)
        MapPointList[list_[i].id] = array_
      }
      this.banMa = this.getJson(MapPointList)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    showVideoFn(option) {
      console.log(option)
      if (!option.ip) {
        this.$confirm('该设备未定义IP?', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          type: 'warning'
        }).then(() => {
        }).catch(() => {
        });
      } else {
        this.videoIp = option.ip;
        this.pointData = this.getJson(option);
        this.videoVisible = true;
      }
    },
    showCornerFn(item) {
      this.floorStudentOption = item;
      this.floorStudent = true
    },
    showVideoErroFn(option) {

      this.videoVisible = true;
    },
    // 获取学校楼层数据
    async getFloorData() {
      let data = await this.$fetch(this.api.floor.index, {p: 1});
      console.log('楼层数据内容：', data)
      // 构建楼层信息
      for (let i in data.list.data) {
        data.list.data[i].map = openBASE_URL('img') + data.list.data[i].map
      }
      this.floorData = this.getJaon(data.list.data)
      if(this.floorData.length){
       this.mapFloor = true
      }
      // if(this.floorData.length){
      //   this.floorDataVisible = true
      // }else{
      //   this.$confirm('请添加相应楼层信息！', '提示', {
      //     confirmButtonText: '确定',
      //     showCancelButton: false,
      //     type: 'warning'
      //   }).then(() => {
      //   }).catch(() => {
      //   });
      // }
      this.getData(0)
      console.log('整栋楼数据', this.floorData)
    },
    getData(index) {
      this.getOnlyFloorData(index)
    },
    // 获取单楼层的数据内容
    async getOnlyFloorData(index) {
      let n = this;
      let data = await this.$fetch(this.api.floor.pointIndex, {p: 0, map_id: this.floorData[index].id});
      console.log('单层数据:', data)
      if (!data.code) {
        let floor = this.floorData
        floor[index].floorData = data.list
        this.floorData = this.getJaon(floor)
        if (index + 1 < this.floorData.length) {
          this.getData(index + 1)
        } else {
          n.loadImage()
          setTimeout(() => {
            n.loading = false
          }, 1000)
        }
      }
    },
    getMapFloor(index) {
      this.floorIndex = index;
      this.banMa = [];
      this.loadImage()
    },
    getJaon(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 移入
    mouseOver(e) {
      console.log('进入：', e)
      // this.active = "background-color:black";
      // // 操作dom 获取p标签改变其样式
      // var acps = this.$refs.acp
      // acps.style.color = "red"
    },
    // 移出
    mouseLeave() {
      // this.active = "";
      // this.$refs.acp.style=''
    },
    getMessageFn() {
      let n = this;
      this.setTime = setInterval(() => {
        n.getNewsFn()
      }, 2000)
    },
    getStudentFn() {
      let n = this;
      this.setTimeStudent = setInterval(() => {
        n.getCornerFn()
      }, 2000)
    },
    getCornerFn() {
      let n = this;
      this.$fetch(this.api.floor.studentNumber, {}).then(data => {
        if (!data.code) {
          // cornerNumber
          for (let i in data.list) {
            n.cornerNumber[data.list[i].corner_id] = data.list[i];
          }
        }
      })
    },
    getNewsFn() {
      let n = this;
      this.$fetch(this.api.floor.fail, {}).then(data => {
        if (!data.code) {
          for (let i in data.list) {
            data.list[i].data = JSON.parse(data.list[i].data)
            this.videoErroList[data.list[i].id] = data.list[i];
            if (n.banMa[data.list[i].id]) {
              n.banMa[data.list[i].id].fail_type = data.list[i].fail_type
            }
          }
          if (data.list.length) {
            this.videoErroStatus = true;
          } else {
            this.videoErroStatus = false;
          }
        }
      })
    },
    // 修复内容
    repairFn(index) {
      let n = this;
      this.$post(this.api.floor.repair, {id: n.banMa[index].id}).then((response) => {
        if (!response.code) {
          n.banMa[index].fail_type = 0;
        } else {
          this.$message.error(response.msg)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    getToFloor(){
      this.$router.push('/floorManage')
    }
  },
  mounted() {

  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
  user-select: none;
}

.cornerComment-in {
  width: 96%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  /*padding: 20px;*/
  flex: 1;
  overflow-y: auto;
  min-height: 300px;
}

.imageMap {
  width: 98%;
  height: calc(100vh - 130px);
  margin: 0 auto;
  border: 1px solid #EEEEEE;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floorNotData {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.title-floor {
  font-size: 16px;
  margin-bottom: 20px;
}

.close-Btn-line {
  cursor: pointer;
}

#map_point {
  position: relative;
}

#map_point img {
  display: block;
  width: 100%;
}

.point-list {
  position: absolute;
  width: 0;
  height: 0;
}

.point-list .iconfont {
  font-size: 26px;
  color: #1e94ff;
  margin-right: 0;
  cursor: pointer;
  position: relative;
  top: -26px;
  left: 4px;
  display: flex;
  justify-content: center;
}

.domContainer {
  position: absolute;
  top: 5px;
  left: 0;
}

.domContainer_corner {
  position: relative;
  top: -10px;
  left: -10px;
}

.domContainer_corner .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7ac0f7;
  position: absolute;
  left: 4px;
  top: 5px;
}

/*警报*/
.pulse {
  /*background: rgba(239, 45, 2, 0.8) !important;*/
  -webkit-animation: warn 0.9s ease-out;
  -moz-animation: warn 0.9s ease-out;
  animation: warn 0.9s ease-out;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  /*box-shadow: 1px 1px 30px #EF2D02;*/
}

.pulse, .pulse-big {
  position: absolute;
  width: 34px;
  height: 34px;
  /*border: 2px solid #EF2D02;*/
  /*background: rgba(239, 45, 2, 0.8);*/
  border-radius: 50%;
  /*z-index: 100;*/
  opacity: 0;
  top: -13px;
  left: -16px;
}

.warningColor {
  border: 2px solid #EF2D02;
  background: rgba(239, 45, 2, 0.8);
}

.warningBg {
  background: rgba(239, 45, 2, 0.8) !important;
  box-shadow: 1px 1px 30px #EF2D02;
}

.successBg {
  background: rgb(68, 255, 0) !important;
  box-shadow: 1px 1px 30px #14b500;
}

.successColor {
  border: 2px solid #EF2D02;
  background: rgba(239, 45, 2, 0.8);
}

@keyframes warn {
  0% {
    -moz-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  100% {
    -moz-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

.text-red {
  width: 2px;
  height: 2px;
  background: red;
}

.point-text {
  display: flex;
  justify-content: center;
}

.point-text span {
  white-space: nowrap;
  color: #000;
  font-weight: bold;
}

.floor_list {
  position: absolute;
  left: 20px;
  top: 20px;
  background: #fff;
  border-radius: 4px;
  padding: 0 10px;
  box-shadow: 0 0 5px #007cc5;
}

.floor_list_data {
  border-bottom: 1px solid #f4f4f4;
  padding: 0 6px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}

.floor_list_data:hover {
  font-weight: bold;
  color: #006dcd;
}

.floor_list_data:last-child {
  border-bottom: none;
}

.acitveFloor {
  font-weight: bold;
  color: #006dcd;
}

.pouperBox-box {
  width: 170px;
  height: 100px;
  background: #c2e5ff;
  border: 2px solid #c2e5ff;
  border-radius: 7px;
  position: relative;
  padding: 6px;
}

.pouperBox-box p {
  color: #000;
  font-size: 14px;
}

.pouperBox-box::before {
  content: '';
  width: 0;
  height: 0;
  border: 14px solid;
  position: absolute;
  bottom: -30px;
  left: 65px;
  border-color: #c2e5ff transparent transparent;
}

.pouperBox {
  position: absolute;
  top: -105px;
  left: -61px;
  z-index: 1;
  box-shadow: 0 0 10px #333;
  border-radius: 7px;
}

.floorData-pointType {
  position: absolute;
  left: 112px;
  top: 20px;
  height: 30px;
  display: flex;
  background: rgba(255, 255, 255, 1);
  align-items: center;
  padding: 0 20px;
  border-radius: 5px;
  box-shadow: 0 0 5px #007cc5;
}

.floorData-pointType-list {
  padding: 0 20px;
  border-right: 1px solid #ddd;
  cursor: pointer;
}

.floorData-pointType-list:first-child {
  padding-left: 0;
}

.floorData-pointType-list:last-child {
  border-right: none;
  padding-right: 0;
}

.floorData-pointType-list i {
  color: #1e94ff;
}

.erro-video-line {
  background: rgba(0, 0, 0, .5);
  position: absolute;
  bottom: 0;
  height: 120px;
  width: 100%;
  padding: 5px;
  display: flex;
  box-sizing: border-box;
}

.erro-video-line-list {
  width: 200px;
  height: 110px;
  background: #ddd;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  margin-right: 10px;
  border-radius: 4px;
  overflow: auto;
}

.erro-video-line-list-video {
  flex: 1;
  background: #000;
  height: 80px;
}

.erro-video-line-list-video-iframe {
  width: 100%;
  height: 80px;
}

.erro-video-line-list-btn {
  height: 30px;
  display: flex;
  align-items: center;
  background: #fff;
  font-size: 12px;
  padding: 0 2px;
}

.erro-video-line-list-btn-l {
  flex: 1;
}

.erro-video-line-list-btn-l p {
  line-height: 1;
}

.erro-video-line-list-btn-l p:last-child {
  color: #999;
}

.erro-video-line-list-btn-r span {
  display: block;
  width: 60px;
  height: 20px;
  background: #006dcd;
  text-align: center;
  line-height: 20px;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
}

.activeTab span {
  color: #ddd;
}

.activeTab i.el-icon-close {
  color: #ddd;
}

.floorData-pointType-list i.corner_color {
  color: #ef6f14;
}

.corner-icon-color {
  color: #ef6f14 !important;
  font-size: 21px !important;
}

.corner-name-box {
  font-size: 12px;
  position: absolute;
  /*width: 200px;*/
  font-weight: bold;
  /*left: -90px;*/
  text-align: center;
  white-space: nowrap;
  top: 23px;
}
</style>



